<template>
	<view>
		<view v-if="!homeload">
			<!-- 未登录显示的页面 -->
			<view class="content" v-if="!wxlofin">
				<view class="content-log">
					<view class="logt1"><text class="log-t1">PengLin鹏邻</text></view>
					<view class="logt2"><text class="logt-t2">金鹏物业二手房</text></view>
				</view>

				<view class="content-title">
					<view class="title-t"><text>登录后才能委托卖房/出租、买房/租房,查看自己委托的内容</text></view>
				</view>

				<view class="content-but">
					<button plain="true" class="butt" open-type="getUserInfo" @getuserinfo="getUserInfo"><text>微信授权登录</text></button>
					<!-- <button plain="true" class="butt" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"><text>请点击获取您的手机号</text></button> -->
				</view>
				<!-- 及时反馈组件 -->
				<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>
			</view>

			<!-- 内容页面 -->
			<view v-if="wxlofin" class="publish-v">
				<view class="publish-frame">
					<block v-for="(item, index) in titleArr" :key="index">
						<view class="publish-cata shadow" @click="showEntrust(address, item.type)">
							<view class="publish-content">
								<text>{{ item.title }}</text>
								<text>{{ item.label }}</text>
							</view>
							<view><image :src="item.img" class="publish-image"></image></view>
						</view>
					</block>
				</view>

				<view class="my">
					<view class="txt">我的委托</view>
					
						<block v-for="(item, index) in entrustArr" :key="index">
							
							
							<view class="entrustView shadow" v-if="item.type == 0">
								<view class="en_title">
									<text v-if="item.type == 0"> 我要租房 </text>
									<view>
										<image src="../../static/inster/zufang3.png" class="publish-image"></image>
									</view>
								</view>
								
								<view class="tit">
									<text>{{item.residenttialName}}</text>
									<text>{{item.position}}</text>
									<text class="pl">{{item.requirement}}</text>
								</view>
								
								<view class="titl ">
									<text style="color: red;">待处理</text>
								</view>
								
							</view>
							
							<view class="entrustView shadow" v-if="item.type == 1">
								<view class="en_title">
									<text v-if="item.type == 1"> 我要买房 </text>
									<view>
										<image src="../../static/inster/maifang1.png" class="publish-image"></image>
									</view>
								</view>
								
								<view class="tit">
									<text>{{item.residenttialName}}</text>
									<text>{{item.position}}</text>
									<text>{{item.requirement}}</text>
								</view>
								
								<view class="titl">
									<text style="color: red;">待处理</text>
								</view>
								
							</view>
							
							<view class="entrustView shadow" v-if="item.type == 2">
								<view class="en_title">
									<text v-if="item.type == 2"> 有房出售 </text>
									<view>
										<image src="../../static/inster/chushou.png" class="publish-image"></image>
									</view>
								</view>
								
								<view class="tit">
									<text>{{item.residenttialName}}</text>
									<text>{{item.position}}</text>
									<text v-if="item.requirement != undefined">{{item.requirement}}万</text>
								</view>
								
								<view class="titl">
									<text style="color: red;">待处理</text>
								</view>
								
							</view>
							
							<view class="entrustView shadow" v-if="item.type == 3">
								<view class="en_title">
									<text v-if="item.type == 3"> 有房出租 </text>
									<view>
										<image src="../../static/inster/chuzu.png" class="publish-image"></image>
									</view>
								</view>
								
								<view class="tit">
									<text>{{item.residenttialName}}</text>
									<text>{{item.position}}</text>
									<text>{{item.requirement}}元/月</text>
								</view>
								
								<view class="titl">
									<text style="color: red;">待处理</text>
								</view>
								
							</view>
						</block>
					<view class="none" v-if="show"><text>暂无数据</text></view>
				</view>
			</view>
		</view>

		<view>
			<!-- 进入页面的loading -->
			<home-load v-if="homeload"></home-load>
		</view>
	</view>
</template>

<script>
var db = wx.cloud.database();
var users = db.collection('user');
// 引入公用存储用户登录
import { login } from '../../common/list.js';
import {addressdata} from '../../common/list.js'
import { publicing } from '../../api/api.js';
// 引入请求地址
import { queryEntrustInfoUrl } from '../../api/request.js';
// 引入即可反馈组件
import HMmessages from '../../components/HM-messages/HM-messages.vue';
// 引入vuex的mapstate
import { mapState } from 'vuex';
var { log } = console; // 解构
export default {
	components: { HMmessages },
	data() {
		return {
			wxlofin: '',
			id: '',
			homeload:true, // 进入页面loading加载
			address:'',
			openid:'',
			entrustArr:[],
			show:false,
			// 轮播数组
			titleArr: [
				{
					img: require('../../static/inster/chushou.png'),
					title: '有房出售',
					label: '全程优质服务',
					type:'1'
				},
				{
					img: require('../../static/inster/chuzu.png'),
					title: '有房出租',
					label: '放心托管',
					type:'2'
				},
				{
					img: require('../../static/inster/maifang1.png'),
					title: '我要买房',
					label: '定制推荐',
					type:'3'
				},
				{
					img: require('../../static/inster/zufang3.png'),
					title: '我要租房',
					label: '快速响应',
					type:'4'
				}
			]

		};
	},

	methods: {
		// 获取用户委托信息
		queryEntrustInfoList(openid) {
			let data = {
				userId:openid
			};
			log("获取用户委托信息:"+JSON.stringify(data))
			publicing(queryEntrustInfoUrl, data)
				.then(res => {
					log("获取用户委托信息22:"+JSON.stringify(res))
					this.listArr = res.data;
					if (JSON.stringify(this.listArr) != '[]') {
						this.entrustArr = this.listArr
						log("获取用户委托信息33:"+JSON.stringify(this.entrustArr))
						this.show = false;
					} else {
						this.entrustArr = [];
						this.show = true;
						
						log("获取用户委托信息集合222222222222222:"+this.show)	
					}
				})
				.catch(err => {
					log(err);
				});
			log("获取用户委托信息集合:"+JSON.stringify(this.entrustArr))	
		},
		
		showEntrust(address,type,openid){
			log("传入子页面的openid为:"+this.openid)

			let obj = {address:address,id:this.openid,type:type }
			let objStr = JSON.stringify(obj);
			log("objStr:"+objStr)

			wx.navigateTo({
				url: '../index/publish/publish?obj='+objStr
			});
		},


		// 请求数据库看看用户有没有登录
		ifUser() {
			// 显示遮罩层
			this.homeload = true;
			users
				.get()
				.then(res => {
					console.log(res);

					if (res.data.length === 0) {
						// 隐藏遮罩层
						this.homeload = false;
						log('未登录')
						this.wxlofin = false;

					} else {
						// 隐藏遮罩层
						this.homeload = false;
						log('已登录')
						this.wxlofin = true;
						this.id = res.data[0]._id;
						this.openid = res.data[0]._openid

						// 获取用户委托信息
						this.queryEntrustInfoList(this.openid)

					}

				})
				.catch(err => {
					console.log(err);
				});


		},

		// 发起登录取到用户信息
		getUserInfo(event) {

			console.log(event);
			// 存储用户信息到user数据库
			let user = event.detail.userInfo;
			login(user)
				.then(res => {
					console.log(res);
					// 存储到vuex数据仓库
					// this.$store.commit('openidmuta',res.data[0]._openid)
					// 登陆成功
					this.$nextTick(() => {
						//dom更新循环结束之后的延迟回调
						this.HMmessages.show('登陆成功', { icon: 'success', iconColor: '#ffffff', fontColor: '#ffffff', background: 'rgba(240, 142, 35, 0.8)' });
					});
					this.wxlofin = true;
				})
				.catch(err => {
					console.log(err);
				});
		}
	},
	onShow() {
		log("执行了onshow")
		// 请求数据库看看用户有没有登录
		this.ifUser();


	},
	computed:{
		...mapState(['addressdata','openiddata']),
		getAddress() {
			// vuex仓库取出当前地址
			this.address = this.addressdata.addressstr
			// vuex仓库取出当前用户openid
			// this.openid = this.openiddata.openid
			// log("openid:"+this.openid)
		}
	},


};
</script>

<style scoped>
.content {
	display: flex;
	flex-direction: column;
}
.content-log {
	height: 400upx;
}

.logt1 {
	margin-top: 90upx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.logt2 {
	margin-top: 10upx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.log-t1 {
	font-size: 70upx;
	font-weight: bold;
	color: #f08e23;
	letter-spacing: 8upx;
}
.logt-t2 {
	font-size: 35rpx;
	font-weight: bold;
	color: #8e8e8e;
	letter-spacing: 30upx;
}
.content-title {
	width: 100%;
}
.title-t {
	margin: 0 auto;
	width: 70%;
	/* background-color: #9befff; */
	text-align: center;
}
.title-t text {
	font-size: 30upx;
	color: #8e8e8e;
	letter-spacing: 3upx;
}
.content-but {
	margin-top: 50upx;
	width: 100%;
}
.butt {
	width: 90%;
	margin: 0 auto;
	background-color: #f08e23;
	border: none;
	border-radius: 40upx;
}
.butt text {
	font-size: 34upx;
	letter-spacing: 10upx;
	color: #ffffff;
}

/* 发布委托列表 */
.publish-v {
	margin: 40upx 30upx 0 30upx;
	width: 90%;
}

.publish-frame {
	border-radius: 20upx;
	padding-top: 12upx;
	height: 327upx;
	width: 100%;
	display: flex;
	/* justify-content: space-between; */
	justify-content: space-around;
	flex-wrap: wrap;
	background-color: #FFFFFF;
}
.publish-cata {
	width: 48%;
	height: 150upx;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-radius: 15upx;
}

.publish-content {
	display: flex;
	flex-direction: column;
}
.publish-content text:nth-child(1) {
	padding-bottom: 7upx;
	font-size: 30upx;
	font-weight: bold;
	letter-spacing: 3upx;
}
.publish-content text:nth-child(2) {
	font-size: 25upx;
	color: #666666;
}
.publish-image {
	width: 90upx;
	height: 90upx;
}
.txt {
	margin-top: 40upx;
	font-size: 35upx;
	font-weight: bold;
	letter-spacing: 3upx;
}
.none {
	height: 100upx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.none text {
	text-align: center;
	font-size: 25upx;
	color: #cccccc;
	margin: 0 auto;
}

.container{
	background-color: #F9F9F9;
	width: 103%;
	/* height: 1000upx; */
	border-radius: 20upx;
	margin-top: 10upx;
}


.entrustView{
	margin-top: 20upx;
	height: 190upx;
	/* background-color: #fafafa; */
	border-radius: 30upx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	/* border-bottom: 1px solid #e6e6e6; */
	
}

.en_title text {
	padding-bottom: 7upx;
	font-size: 30upx;
	font-weight: bold;
	letter-spacing: 3upx;
}

.en_title{
	margin-left: 30upx;
	padding-right: 20upx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* flex-grow:2; */
}
.publish-image {
	width: 110upx;
	height: 110upx;
}
.tit{
	margin: 16upx 0 16upx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	font-size: 25upx;
	/* flex-grow:3; */
	/* width: 50%; */
	
/* 	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; */
	
}

.titl{
	margin: 16upx 0 16upx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	font-size: 25upx;
	margin-right: 30upx;
	/* flex-grow:2; */
}
.pl{
	 width: 160upx;
	        overflow:hidden;
	        text-overflow:ellipsis; 
}
.tit text{
	font-size: 28upx;
	letter-spacing: 2upx;
	color: #666666;
}
.titl text{
	font-size: 28upx;
	letter-spacing: 2upx;
	color: #666666;
}
.shadow{
	box-shadow:#F7F7F7 0px 0px 20px;
}
</style>
